<template>
	<el-row :gutter="40" class="panel-group">
		<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
			<div class="card-panel" @click="handleSetLineChartData('newVisitis')">
				<div class="card-panel-icon-wrapper icon-people">
					<svg-icon icon-class="skill" class-name="card-panel-icon" />
				</div>
				<div class="card-panel-description">
					<div class="card-panel-text">
						节目集统计
					</div>
					<count-to :start-val="0" :end-val="data.s1" :duration="2600" class="card-panel-num" />
				</div>
			</div>
		</el-col>
		<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
			<div class="card-panel" @click="handleSetLineChartData('messages')">
				<div class="card-panel-icon-wrapper icon-message">
					<svg-icon icon-class="skill" class-name="card-panel-icon" />
				</div>
				<div class="card-panel-description">
					<div class="card-panel-text">
						节目统计
					</div>
					<count-to :start-val="0" :end-val="data.s2" :duration="3000" class="card-panel-num" />
				</div>
			</div>
		</el-col>
		<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
			<div class="card-panel" @click="handleSetLineChartData('purchases')">
				<div class="card-panel-icon-wrapper icon-money">
					<svg-icon icon-class="user" class-name="card-panel-icon" />
				</div>
				<div class="card-panel-description">
					<div class="card-panel-text">
						录入员统计
					</div>
					<count-to :start-val="0" :end-val="data.s3" :duration="3200" class="card-panel-num" />
				</div>
			</div>
		</el-col>
		<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
			<div class="card-panel" @click="handleSetLineChartData('shoppings')">
				<div class="card-panel-icon-wrapper icon-shopping">
					<svg-icon icon-class="user" class-name="card-panel-icon" />
				</div>
				<div class="card-panel-description">
					<div class="card-panel-text">
						审核员统计
					</div>
					<count-to :start-val="0" :end-val="data.s4" :duration="3600" class="card-panel-num" />
				</div>
			</div>
		</el-col>

		<el-card>
			<div style="width: 40vw;">
				<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
					<el-form-item label="日期范围" prop="field101">
						<el-date-picker type="daterange" v-model="formData.field101" format="yyyy-MM-dd"
							value-format="yyyy-MM-dd" :style="{width: '100%'}" start-placeholder="开始日期"
							end-placeholder="结束日期" range-separator="至" clearable></el-date-picker>
					</el-form-item>
					<el-form-item size="large">
						<el-button type="primary" @click="submitForm">提交</el-button>
						<el-button @click="resetForm">重置</el-button>
					</el-form-item>
				</el-form>
			</div>





		</el-card>
		<el-card>
			<div>
				<el-table :data="tableData" style="width: 100%">
					<el-table-column prop="name" label="姓名" width="180"> </el-table-column>
					<el-table-column prop="jmj" label="节目集"> </el-table-column>
					<el-table-column prop="jm" label="节目"> </el-table-column>
				</el-table>
			</div>
		</el-card>

	</el-row>
</template>

<script>
	import CountTo from 'vue-count-to'

	export default {
		components: {
			CountTo
		},


		data() {
			return {
				data: [],
				tableData: [],
				formData: {
					field101: [, ],
				},
				rules: {
					field101: [{
						required: true,
						type: 'array',
						message: '请至少选择一个日期范围',
						trigger: 'change'
					}],
				},
			}

		},
		methods: {
			submitForm() {
				this.$refs['elForm'].validate(valid => {
					if (!valid) return
					// TODO 提交表单
					this.getdata()
				})
			},
			resetForm() {
				this.$refs['elForm'].resetFields()
			},
			handleSetLineChartData(type) {
				this.$emit('handleSetLineChartData', type)
			},
			getdata() {
				this.$http.get('getinfo?b=' + this.formData.field101[0] + '&v=' + this.formData.field101[1]).then(r => {
					console.log(r)
					this.data = r.data
					this.tableData = r.data.s5
					console.log(this.tableData)
				})
			}
		},
		created() {
			this.getdata()
		}
	}
</script>

<style lang="scss" scoped>
	.panel-group {
		margin-top: 18px;

		.card-panel-col {
			margin-bottom: 32px;
		}

		.card-panel {
			height: 108px;
			cursor: pointer;
			font-size: 12px;
			position: relative;
			overflow: hidden;
			color: #666;
			background: #fff;
			box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
			border-color: rgba(0, 0, 0, .05);

			&:hover {
				.card-panel-icon-wrapper {
					color: #fff;
				}

				.icon-people {
					background: #40c9c6;
				}

				.icon-message {
					background: #36a3f7;
				}

				.icon-money {
					background: #f4516c;
				}

				.icon-shopping {
					background: #34bfa3
				}
			}

			.icon-people {
				color: #40c9c6;
			}

			.icon-message {
				color: #36a3f7;
			}

			.icon-money {
				color: #f4516c;
			}

			.icon-shopping {
				color: #34bfa3
			}

			.card-panel-icon-wrapper {
				float: left;
				margin: 14px 0 0 14px;
				padding: 16px;
				transition: all 0.38s ease-out;
				border-radius: 6px;
			}

			.card-panel-icon {
				float: left;
				font-size: 48px;
			}

			.card-panel-description {
				float: right;
				font-weight: bold;
				margin: 26px;
				margin-left: 0px;

				.card-panel-text {
					line-height: 18px;
					color: rgba(0, 0, 0, 0.45);
					font-size: 16px;
					margin-bottom: 12px;
				}

				.card-panel-num {
					font-size: 20px;
				}
			}
		}
	}

	@media (max-width:550px) {
		.card-panel-description {
			display: none;
		}

		.card-panel-icon-wrapper {
			float: none !important;
			width: 100%;
			height: 100%;
			margin: 0 !important;

			.svg-icon {
				display: block;
				margin: 14px auto !important;
				float: none !important;
			}
		}
	}
</style>